<template>
	<div class="alarm-management">
    <!-- 搜索 -->
    <search @search_data="search_data"></search>
		<!-- 列表 -->
		<el-table :data='listData' :header-cell-style="getRowClass" v-loading="loading" stripe id="table" >
      <el-table-column prop='num' label='序号'  ></el-table-column>
      <el-table-column prop='fireplugId' label='位置编号' ></el-table-column>
      <!-- <el-table-column prop='wpdata' label='消防栓水压'>
				<template slot-scope='scope' >
          {{scope.row.wpdata}}<div style="display: inline;" v-if="+scope.row.wpdata < 0.07"><img src="../../../../static/image/ShowMap/exceptional.png" style="vertical-align: -7%;margin: 0 2px 0 8px"><span style="color:#EB3838;">异常</span></div>
        </template>
			</el-table-column>
      <el-table-column prop='siteAddress' label='消防栓位置' ></el-table-column>
      <el-table-column prop='volt' label='设备电量' >
				<template slot-scope='scope' >
          <el-progress :percentage="scope.row.volt" :class="scope.row.volt > 15?'blue': 'red'"></el-progress>
        </template>
			</el-table-column>
      <el-table-column prop='iotOnlineState' label='设备状态'>
        <template slot-scope='scope'>
          <span :style="scope.row.iotOnlineState === 'ONLINE'? 'color:#388BFF':'color:#EB3838'">{{ scope.row.iotOnlineState === 'ONLINE'?'在线':'连接丢失' }}</span>
        </template>
      </el-table-column>
			<el-table-column label="操作">
        <template slot-scope="scope" >
          <el-button type="text" size="small" title="查看"  @click="handelSee(scope.row)" style='width:0px;padding:0;'>
            <img src="../../../../static/image/device/see.png">
          </el-button>
        </template>
      </el-table-column> -->
      <el-table-column prop='fireAdress' label='消防栓位置'   min-width="150%">
        <template slot-scope='scope'>
          <span :title="scope.row.fireAdress">{{ scope.row.fireAdress}}</span>
        </template>
      </el-table-column>
      <el-table-column prop='starttime' label='开始时间'></el-table-column>
      <el-table-column prop='stoptime' label='结束时间'></el-table-column>
      <el-table-column prop='time' label='报警时长' ></el-table-column>
      <el-table-column prop='type' label='报警类型' >
        <template slot-scope='scope'>
          <span :style="scope.row.type === 0? 'color:rgb(245, 30, 30)': scope.row.type === 2? 'color:rgb(245, 150, 30)': 'color:#9E43FF'">{{ scope.row.type === 0? '水压低压报警 ' + scope.row.data + 'MPa': scope.row.type === 1? '水压高压报警 '+ scope.row.data + 'MPa':scope.row.type === 2? '电池低压报警 ' +scope.row.data + '%': scope.row.type === 3? scope.row.data =='1'?'设备异常报警: 传感器异常':'' : ''}}</span>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope" >
          <el-button type="text" size="small" title="查看"  @click="handelSee(scope.row)" style='width:0px;padding:0;'>
            <img src="../../../../static/image/device/see.png">
          </el-button>
        </template>
      </el-table-column>
    </el-table>
		<!-- 分页 -->
		<div class="pagination">
      <div class='page-left'>
        <span>共{{ this.totals}}条数据 </span>
        <span>每页:</span>
        <el-input placeholder="条数" v-model="inputs" @blur="enter" @keyup.enter.native="enter" clearable> </el-input>
        <span>条</span>
      </div>
      <el-pagination background layout="prev, pager, next, jumper"  :page-size="pageSize" :total="totals" @current-change="handleCurrentChanges" id='page' :current-page.sync="currentPage"></el-pagination>
    </div>

		<!-- Form 弹框查看 -->
    <el-dialog title='设备预览' :visible.sync='dialogTableVisible' :modal-append-to-body='false' class='dialog-see' v-if="dialogTableVisible">
			<div class="left-box">
        <!-- 进度条 -->
				<div class="facility">
          <div style="height:100%;width:346px;float:left">
            <el-form :model="form"  @submit.native.prevent label-position="right" label-width="100px">
              <el-form-item label='设备编号：'>{{form.imei}}</el-form-item>
              <el-form-item label='位置编号：' >{{form.fireplugId}}</el-form-item>
              <el-form-item label='区域名称：' >{{form.areaName}}</el-form-item>
              <el-form-item label='小区名称：' >{{form.siteName}}</el-form-item>
              <el-form-item label='详细地址：' >{{form.siteAddress}}</el-form-item>
              <el-form-item label='设备状态：' >{{form.onlineState === 'ONLINE'?'在线':form.onlineState === 'OFFLINE'? '离线': ''}}</el-form-item>
            </el-form>
          </div>
          <div style="height:100%;width:404px;float:right;position: relative;">
						<div style="float:left;" v-if="form.type === 0">
							<img src="../../../../static/image/alarm/off.png" style="margin-top: -12px; margin-left: -12px;">
							<span style="position: absolute; top: 44%; left: 42px; color: #999999; font-size: 14px;">水压状态异常</span>
							<div style="position: absolute;font-size: 32px; color: #333; top: 25%; left: 1%;width: 170px;text-align: center;">{{form.data}}<span style="font-size:18px; color: #999999;">MPa</span></div>
						</div>
            <div style="float:left;" v-if="form.type !== 0">
							<img src="../../../../static/image/alarm/on.png" style="margin-top: -12px; margin-left: -12px;">
							<span style="position: absolute; top: 44%; left: 42px; color: #999999; font-size: 14px;">水压状态正常</span>
							<div style="position: absolute;font-size: 32px; color: #333; top: 25%; left: 1%;width: 170px;text-align: center;">{{form.wpdata}}<span style="font-size:18px; color: #999999;">MPa</span></div>
						</div>
						<span style="position: absolute; top: 80%; left: 42px; color: #999999; font-size: 14px;">报警水压状态</span>

            <div v-if="form.type === 2">
              <el-progress type="circle" :percentage="form.data" color="#eb3838" style="float:right" :stroke-width="5"></el-progress>
              <span style="position: absolute; top: 44%; right: 42px; color: #999999; font-size: 14px;">电池状态异常</span>
            </div>
            <div v-if="form.type !== 2">
              <el-progress type="circle" :percentage="form.volt" color="#3E7EFF" style="float:right" :stroke-width="5"></el-progress>
              <span style="position: absolute; top: 44%; right: 42px; color: #999999; font-size: 14px;">电池状态正常</span>
            </div>
            <span style="position: absolute; top: 80%; right: 42px; color: #999999; font-size: 14px;">当前电池状态</span>
          </div>
				</div>

        <!-- 下方 -->
        <div class="message">
          <div style="font-size:16px;color:#333333;margin-top: 28px;">管理人信息</div>
          <div style="font-size:14px;color:#333333;margin-top: 28px;">
            <span>管理员姓名：</span>
            <span>{{form.name}}</span>

            <span style="margin-left: 80px;">管理员电话：</span>
            <span>{{form.phone}}</span>
          </div>

          <div style="width:100%;height: 200px;margin-top: 37px;">
            <vue-scroll @handle-scroll="handleComplete" :ops="ops">
            <!-- 列表 -->
            <el-table :data='listDataS' :header-cell-style="getRowClass" v-loading="loading" stripe >
              <el-table-column prop='num' label='序号' ></el-table-column>
              <el-table-column prop='time' label='报警时间' ></el-table-column>
              <el-table-column prop='types' label='报警类型' ></el-table-column>
            </el-table>
            </vue-scroll>
				</div>
        </div>
			</div>
    </el-dialog>
	</div>
</template>
<script>
import { mapGetters } from 'vuex'
import moment from 'moment'
import echarts from 'echarts'
import Config from '../../../config'
import TimeSelect from '../../../components/TimeSelect'
import Search from './Search'
import Location from '../../../util/location'
import qs from "qs"
import {regionDataPlus} from 'element-china-area-data'
export default {
  name: 'AlarmManagement',
  components: {
    TimeSelect,
    Search
  },
  data: function () {
    return {
      ops: {
        bar: {
          background: '#DDDEE0',
          onlyShowBarOnScroll: false,
        }
      },
			//列表
			listData: [],
			// loading
			loading: false,
			// 分页
			totals: null,
			currentPage: 1,
			pageSize: 15,
			inputs:15,
			// 弹框
			dialogTableVisible: false,
			// 弹框数据
      form: {
        // name: '',
        // phone: ''
      },
      // 弹框列表
      listDataS: [],
      // 列表条数
      num: 0,
      // 滚动之后请求的页数
      flag_number: 0,

      // 搜索条件
      obj: null,

      // 判断是路由还是正常请求
      flag: 0
    }
  },

  methods: {
    // 表头添加背景颜色
		getRowClass ({row, column, rowIndex, columnIndex}) {
			if (rowIndex === 0) {
				return 'background:#f6f6f6'
			} else {
				return ''
			}
		},
		// 查看
		handelSee(data){
			this.form = JSON.parse(JSON.stringify(data))
      this.dialogTableVisible = true
      this.num = 0
      this.flag_number = 0
      this.listDataS.splice(0)
      // console.log(data)
			this.$nextTick(() => {
        // 列表
        this.window_list(0)
      })
      // 管理人员
        this.people(data.siteId)
    },
    // 管理员信息
    people(id) {
      let url = `${Config.AUTH_URL}/getManagerInfoByDistrictId`
      let param = {
        districtId : id
      }
       this.$http.get(url, param).then((res) => {
        console.log(res)
        this.$nextTick(() => {
          this.form.name = res.name
          this.form.phone = res.phone
        })

       })
    },
    // 弹框列表
    window_list(page) {
      let url = `${Config.FIREPLUG_APP_URL}/fireplug/alarm/${this.form.imei}`
      let param = {
        page: page,
        size: 5
      }
      this.$http.get(url, param).then((res) => {
        res.content.map((item, i) => {
          item.num = this.num + 1 + i
          item.time = moment(item.ts).format('YYYY.MM.DD HH:mm:ss')
          item.types = item.type === 0? '水压低压报警':item.type === 1? '水压高压报警':item.type === 2? '电池低压报警': ''
        })
        this.listDataS = this.listDataS.concat(res.content)
        this.num += res.content.length
      })
    },
    // 弹框列表滚动条
    handleComplete(vertical) {
      if (vertical.process === 1) {
        this.flag_number++
        this.window_list(this.flag_number)
      }
    },

    // 搜索条件
    search_data(datas) {
      // 如果没用路由
      if (this.flag) {
        console.log(datas)
        this.currentPage = 1
        let data = JSON.parse(JSON.stringify(datas))

        let obj = {}

        // 报警条件
        switch (data.alarm) {
          case '水压异常':
            obj.wpStatus = 1
            break
          case '电量异常':
            obj.voltStatus = 1
            break
        }

        // 城市
        if (data.number.district){
          obj.site_id = data.number.district
        } else if (data.number.area) {
          obj.district = data.number.area
        } else if (data.number.city) {
          obj.city = data.number.city
        } else if (data.number.province) {
          obj.province = data.number.province
        } else {
          obj.country = data.number.country
        }

        this.loading = true
        this.obj = JSON.parse(JSON.stringify(obj))
        this.getList(this.obj)

      } else {
        this.rout()

        this.flag = 1
      }
    },
    getList(params) {
      // 判断权限 test//神//凡人
      if (this.role[0].sort === 5) {
        params.site_type='test'
      }else if (this.role[0].sort !== 4) {
        params.site_type='official'
      }

      params.sort = 'ts desc'
      let url = `${Config.FIREPLUG_APP_URL}/fireplug/alarm/search?page=${(this.currentPage - 1) * this.pageSize}&size=${this.pageSize}`
      this.$http.post(url, params).then((res) => {
        this.dispose(res)
      })
    },
    handleData (item) {
      const province = this.getAreaObj(regionDataPlus, item.province)
      const city = this.getAreaObj(province.children, item.city)
      const district = item.district ? this.getAreaObj(city.children, item.district) : {label: ''}
      item.areaName = `${province.label}${city.label}${district.label}`
    },
      /**
       * 获取区域信息
       * @param {Array} arr
       * @param {String} value
       * @return {Object} obj
       * */
      getAreaObj (arr, value) {
        let obj = null
        arr.some(item => {
          if (value === item.value) {
            obj = item
            return true
          }
        })
        return obj
      },

    // 路由传递
    rout() {
      let obj = {}
      obj.fireplugAlarmId = this.$route.params.id.fireplugAlarmId

      this.obj = JSON.parse(JSON.stringify(obj))
      this.getList(this.obj)

    },

    // 数据处理
    dispose(res) {
      this.totals = res.total
      if (res.content.length) {
        res.content.map((item, i) => {
          if (this.currentPage === 1) {
            item.num = i + 1
          } else {
            item.num = (this.currentPage - 1) * this.pageSize + i + 1
          }
          this.handleData(item)
          item.fireAdress = item.areaName +item.siteName+ item.siteAddress
          item.starttime = item.startTime? moment(item.startTime).format('YYYY.MM.DD HH:mm:ss'): ''
          item.stoptime = item.stopTime? moment(item.stopTime).format('YYYY.MM.DD HH:mm:ss'): ''
          if (item.startTime && item.stopTime) {
            let du = moment.duration(moment(item.stopTime) - moment(item.startTime), 'ms')
            let hours = du.get('hours')
            let mins = du.get('minutes')
            let ss = du.get('seconds')

            if (hours) {
              item.time = hours + '时' + mins + '分' + ss + '秒'
            } else {
              item.time =  mins + '分' + ss + '秒'
            }

          } else {
            item.time = ''
          }
        })
        this.listData = res.content
        this.loading = false
      } else {
        this.listData = res.content
        this.loading = false
      }
    },
    // 回车事件
		enter() {
			if (+this.inputs === 0) {
				this.inputs = 15
			}
			if (Number.isInteger(+this.inputs)) {
				this.pageSize = +this.inputs
				this.currentPage = 1
				this.getList(this.obj)
			} else {
				this.$message({
					message: "请输入整数",
					type: "warning"
				})
			}
		},
		// 分页
		handleCurrentChanges(val) {
      this.getList(this.obj)
    }
  },
  computed: {
    ...mapGetters('user', {
      module: 'dealedModule',
      user: 'getUser',
      role: 'getRole',
      district: 'getDistrict'
    })
  },
  mounted() {
    // this.get_list(0, this.pageSize)

    // 如果没路由 则不让请求路由传递的数据
    if (!this.$route.params.id) {
      this.flag = 1
    }
  }
}
</script>
<style lang="scss">
@import "../../../../static/scss/common";
@import "../../../../static/scss/design-list";
.alarm-management{
	// 分页
	.pagination{
		padding: 32px 0 44px 23px;
		background: #fff;
		.page-left{
			font-size: 12px;
			display: inline-block;
			.el-input--suffix{
				width: 56px;
			}
		}
	}
	// 弹框
	.dialog-see.el-dialog__wrapper{

		.el-dialog{
			width:800px;
			height:680px;
			margin-top: auto !important;
			margin: auto;
			position: absolute;
			top: 0;
			bottom: 0;
			left: 0;
			right: 0;
		}
		.el-dialog__body{
			// height: 616px;
			padding: 24px 0;
			box-sizing: border-box;
		}
	}
	.dialog-see{
		.left-box{
			float: left;
			width: 775px;
			height: 570px;
      box-sizing: border-box;
      padding-right: 24px;
      // 进度条
      .facility {
          width: 100%;
          height: 229px;
          border-bottom: 1px dashed #efeaea;
          // 左侧表
          .el-form-item {
            height: 38px !important;
          }
          .el-form-item__label {
            line-height: 20px !important;
            color: $gray3;
          }
          .el-form-item__content {
            line-height: 20px !important;
          }
          // 右侧svg
          .el-progress-circle {
            width: 170px !important;
            height: 170px !important;
          }
          .el-progress__text {
            font-size: 32px !important;
            color: $gray3 !important;
            top: 45% !important;
          }
        }
      // 下方
      .message{
        width: 100%;
        height: 340px;
        .el-table{
          padding: 0;
        }
      }
		}
	}
  #table .cell{
    // margin-left: 40px !important;
    // white-space:nowrap;
  }
}
</style>
